Check which radio button is selected in Vue Js: In Vue.js, radio buttons are used to allow a user to select one option from a group of options. The value of the selected option is bound to a data property in the Vue instance using the “v-model” directive.
When a user selects a radio button, the value of the corresponding option is set to the data property. This is how we get the radio button’s selected value. In this tutorial, we will learn how to get the selected or checked value of a radio button.
In Vue Js, how can I see which radio button is selected?
In Vue.js, you can use the v-model directive to make sure that when a user selects a particular radio button, the corresponding value is stored in the data property in the Vue instance. For example, if you have a data property called “getValue” and a group of radio but
Vue Js Retrieve Checked Radio Button Value
<div id="app">
<div v-for='(option,index) in options'>
<input type="radio" :id="index" v-model="getValue" :value="option" :checked="getValue === 'option'">{{option}}
</div>
<pre>Get Checked Value: {{getValue}}</pre>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
options: ['HTML', 'CSS', 'Javascript', 'Vue', 'Angular', 'React', 'Node'],
getValue: ''
}
},
});
</script>
Output of above example
